<template>
	
	<div class="container-left-wrap">
		<div class="nav-head">
		  <span>场景组</span> 
		  <div>
			  <button @click="openDialog(null,'add')" title="新建文件夹"><el-icon><FolderAdd /></el-icon></button>
		  </div>
		</div>
		    <el-table
		      :data="tableData"
		      style="width: 100%; margin-bottom: 20px"
		      row-key="id"
			  :show-header="false"
			  highlight-current-row
			  ref="treeTableRef"
			  @row-click="onRowClick"
		    >
			  <el-table-column prop="label" label="label">
				  <template #default="scope">
					  <div class="node-row">
						  <div class="title">
							  <span>{{scope.row.name}}</span>
						  </div>
						  <div v-show="scope.row.id!='-1'" v-hasEdit="[scope.row.createUserId]">
							  <ul>
								  <li @click="openDialog(scope.row,'edit')"><el-icon><EditPen /></el-icon></li>
								  <li @click="handleDelete(scope.row)"><el-icon><Delete /></el-icon></li>
							  </ul>
						  </div>
					  </div>
				  </template>
			  </el-table-column>
		    </el-table>
		
		<el-dialog
		  v-model="dialog.visible"
		  :title="dialog.title"
		  destroy-on-close
		  append-to-body
		  width="450px"
		  @close="closeDialog"
		>
		
			<el-form
			  ref="treeFormRef"
			  :model="treeFormData"
			  :rules="treeFormRules"
			  label-width="100px"
			>
			
				<el-form-item label="分组" prop="classifyId">
					  <el-tree-select 
					  v-model="treeFormData.pid" 
					  :props="props" 
					  :data="selectOptionData" 
					  :render-after-expand="true" 
					  check-strictly
					  style="width: 100%;" />
				</el-form-item>
			
				<el-form-item label="名称" prop="name">
				  <el-input v-model="treeFormData.name" placeholder="请输入名称" />
				</el-form-item>
				
				<el-form-item label="序号" prop="sort">
				  <el-input-number
					style="width: 100%;"
				    v-model="treeFormData.sort"
				    controls-position="right"
				  />
				</el-form-item>
			</el-form>
			
			<template #footer>
			  <div class="dialog-footer">
				<el-button type="primary" @click="submitForm"  :loading="loading">确 定</el-button>
				<el-button @click="closeDialog" :loading="loading">取 消</el-button>
			  </div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	
	import { saveForTree,deleteForTree,selectTree,listForClassify} from "@/api/scene";
	import {
	  FolderAdd,EditPen,Delete
	} from '@element-plus/icons-vue'
	import type {FormRules,ElTable} from 'element-plus'
	import { ref ,defineEmits} from 'vue'
	
	const loading=ref(false)
	const selectOptionData=ref([]);
	const treeTableRef=ref<InstanceType<typeof ElTable>>()
	
	const emits = defineEmits(['handleNodeClick'])
	const onRowClick = (row:object) => {
	  emits('handleNodeClick',row)
	}
	
	const treeFormData=ref({
		id:'',
		pid:'',
		name:'',
		code:'',
		sort:0,
	})
	
	const dialog = ref({
		visible:false,
		title:'',
	});
	
	const treeFormRef=ref();
	const treeFormRules=reactive<FormRules>({
	  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
	  code: [{ required: true, message: "请输入账号", trigger: "blur" }],
	});
	
	const tableData=ref([]);
	
	const load=() =>{
		listForClassify({
			id:-1,
		})
		.then(({result}) => {
			tableData.value=result;
			treeTableRef.value!.setCurrentRow({id:-1})
			emits('handleNodeClick',{id:-1})
		})
		.catch((e) => {
		})
		.finally(() => {
		});
	}
	
	const selectOptions=() =>{
		selectTree({
			id:-1,
		})
		.then(({result}) => {
			selectOptionData.value=result;
		})
		.catch((e) => {
		})
		.finally(() => {
		});
	}
	
	const props = {
	  label: 'name',
	  value:'id',
	  children: 'children',
	}
	
	const openDialog=(row:object,type:string)=>{
		selectOptions();
		if('add'==type){
			dialog.value.visible=true;
			dialog.value.title='新增';
		}else{
			
			dialog.value.visible=true;
			dialog.value.title='编辑';
			treeFormData.value.id=row.id;
			treeFormData.value.pid=row.pid;
			treeFormData.value.name=row.name;
			treeFormData.value.code=row.code;
			treeFormData.value.sort=row.sort;
		}
	}
	
	const submitForm=()=>{
		treeFormRef.value.validate((isValid: boolean) => {
		  if (isValid) {
				loading.value=true;
				saveForTree(treeFormData.value)
				.then((res) => {
					ElMessage.success(res.message);
					closeDialog();
					load();
				})
				.catch((e) => {
				})
				.finally(() => {
					loading.value=false;
				});
		  }
		});
	}
	
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		resetForm();
	}
	const resetForm=()=> {
	  treeFormRef.value.resetFields();
	  treeFormRef.value.clearValidate();
	
	  treeFormData.value.id = "";
	  treeFormData.value.pid = "";
	  treeFormData.value.name= "";
	  treeFormData.value.code= "";
	  treeFormData.value.sort = 0;
	}

	const handleDelete=(data:Object)=>{
		ElMessageBox.confirm("确认删除["+data.name+"]分类吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		  .then(() => {
			  loading.value=true;
			  deleteForTree({
			  	id:data.id
			  })
			  .then(() => {
				load();
				ElMessage.success("删除成功");
			  })
			  .catch((e) => {
			  })
			  .finally(() => {
			  	loading.value=false;
			  });
		  })
		  .catch(() => ElMessage.info("已取消删除"));
	}
	
	onMounted(() => {
		load();
	});
</script>

<style scoped>
	.custom-tree-node {
	  flex: 1;
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  font-size: 14px;
	  padding-right: 8px;
	  
	  >input[type=text]{
	  	background: #1f2632;
	  	border: 1px solid #4d505e;
	  	border-radius: 0;
	  	outline-style: none ;
	  	caret-color:#0080ff;
	  	color: #ccc;
	  }
	  >input[type=text]:focus {
	  	border: px solid #0080ff;
	  }
	}
	
	.container-left-wrap{
		width: 250px;
		height: 100%;;
		color: #fff;
		position: relative;
		background-color: #2b2c2f;
		border-right: 1px solid #4d505e;
		>.nav-head{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			width: 100%;
			height: 34px;
			background-color: #36373a;
			border-bottom: 1px solid #18181b;
			color: #ccc;
			font-size: 14px;
			>span{
				border-left-width: 3px!important;
				padding-left: 8px!important;
				height: 16px;
				line-height: 17px;
				font-size: 13px;
				color: #ccc;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				white-space: nowrap;
				border-left: 2px solid #0080ff;
				margin-left: 8px;
				padding-left: 3px;
			}
			>div{
				float: right;
				margin-top: -1px;
				>button{
				   width: 1.4375rem;
				   height: 1.875rem;
				   margin-right: 0.3125rem;
				   background: transparent;
				   color: #ccc;
				   font-size: 16px;
				   margin-top: 3px;
				   cursor: pointer;
				}
			}
		}
	}
	
	/deep/ .el-table {
	    background-color: transparent;
	    font-size: 12px;
	    color: #ccc;
	}
	
	/deep/.el-table tr {
	    background-color:transparent;
	}
	
	/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
	    border-bottom:transparent;
		border-left: 2px solid transparent; 
		cursor: pointer;
	}
	
	/deep/ .el-table__expand-icon {
	    color: #ccc;
	}
	
	/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
	    background:  #36373a;
	}
	
	/deep/.el-table__body tr.current-row>td.el-table__cell {
		background-color: #174a7d!important;
		border-left: 2px solid #0080ff; 
	}
	
	
	/deep/.el-table__body tr > td:hover {
		background-color: #18222c!important;
		border-left: 2px solid #0080ff; 
	}
	
	/deep/ .el-table__inner-wrapper::before {
		background-color: transparent !important;
	}
	
	/deep/.el-table--default .el-table__cell {
	    padding: 5px 0;
	}
	
	/deep/.el-table--default .cell {
		padding: 0 5px; 
		display: flex;
	}
	
	/deep/.el-table__expand-icon {
	    margin-top: 5px;
		margin-right: 5px;
	}
	/deep/.el-table__expand-icon {
	    margin-right: 4px;
	}
	
	.node-row{
		position: initial;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row;
		flex-direction: row;
		width: 100%;
		>.icon{
			margin-top: -1px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			width: 15px;
			>img{
				width: 0.9375rem;
				height: 0.9375rem;
			}
		}
		>.icon-line{
			margin-top: -1px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			width: 10px;
			>img{
				width: 10px;
				height:10px;
			}
		}
		>.icon-point{
			margin-top: -1px;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			width: 16px;
			>img{
				width: 16px;
				height:16px;
			}
		}
		>.title{
			flex: 1;
			width: 100%;
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			margin-right: 0.3125rem;
			width: 100%;
			margin-left: 0.3125rem;
			>input[type=text]{
				background: #1f2632;
				border: 1px solid #4d505e;
				border-radius: 0;
				outline-style: none ;
				caret-color:#0080ff;
				color: #ccc;
			}
			>input[type=text]:focus {
				border: px solid #0080ff;
			}
			
		}
	 	>div{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			width: 50px;
			>ul{
				>li{
					list-style: none;
					float: left;
					cursor: pointer;
					color: #ccc;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-pack: justify;
					-ms-flex-pack: justify;
					justify-content: space-between;
					-webkit-box-align: center;
					-ms-flex-align: center;
					align-items: center;
					margin-left: 5px;
					>img{
						width: 0.9375rem;
						height: 0.9375rem;
					}
				}
			}
		} 
	}
</style>